con una qualsiasi stilizzazione (potete assegnargli una classe, è lo stesso) in cui inseriamo i link rappresentanti le voci principali del menu; ad ognuno di questi assegniamo un identificativo di tipo id con valore principale: questo identificativo ci servirà in seguito quando analizzeremo lo script; all'evento mouse-over lanciamo la funzione Apri() con un incremento numerico come parametro.
E' importante sottolineare che l'esempio di menu in questione prevede necessariamente un layout di pagina posizionato staticamente sul margine sinistro della pagina. E' inoltre opportuno impostare la distanza dal margine superiore e dal margine sinistro della pagina a zero (0) pixel: in funzione di eventuali modifiche di questi valori, bisognerà modificare le distanze ed il posizionamento degli elementi Html nei codici Css e Javascript, onde rendere il tutto uniforme.
Supponiamo quindi, per praticità, che i margini di tutte le pagine che conterranno il menu siano impostati a zero (0) pixel:
...
...
In un qualsiasi punto della pagina dobbiamo inserire un altro layer di tipo
posizionato dinamicamente, al cui evento mouse-over deve corrispondere al funzione Chiudi() che esamineremo in seguito; ecco il codice:
Costruiamo adesso i sottomenu:
Ad ognuno dei layer assegnamo l'identificatore sottomenu ed uno stile univoco, in cui andiamo a specificare la distanza dal margine sinistro della pagina, in modo da cadere esattamente sotto la propria voce principale.
Passiamo ora alla definizione del foglio di stile Css necessario per il corretto funzionamento del menu.
Il foglio di stile Css: il file menu.css
Il foglio di stile Css che andiamo ad utilizzare per il nostro menu è molto semplice, ma alcuni punti sono fondamentali per il suo corretto funzionamento; analizziamo il codice:
div {
font-size: 11px;
font-family: Verdana;
}
#principale {
color: #000000;
text-decoration: None;
}
#sottomenu {
position: Absolute;
visibility: Hidden;
width: 120px;
padding: 1px;
border: Solid 1px #000000;
}
La stilizzazione del Tag
è in qualche modo indipendente dal codice Css necessario per la stilizzazione dinamica del menu; tuttavia è necessario stabilire delle dimensioni ed un carattere standard, onde poter stabilire misure e distanze per l'accorpamento dei vari elementi Html del menu.
La classe ID #principale si limita a stilizzare i link del menu principale, ovvero le voci di menu al cui passaggio del mouse si attiva il relativo sottomenu.
La classe ID #sottomenu, invece, è necessaria per il posizionamento assoluto dei sottomenu e per impostarli nascosti al caricamento, quindi, le istruzioni veramente necessarie per compiere tali operazioni sono solo
#sottomenu {
position: Absolute;
visibility: Hidden;
width: 120px;
padding: 1px;
border: Solid 1px #000000;
}
mentre il resto è del tutto personalizzabile ed ampliabile.
Dinamizzazione Javascript: il file menu.js
Come già accennato nelle prime righe di questo Articolo, andiamo ad analizzare nello specifico le istruzioni necessarie per il funzionamento del menu con Microsoft Internet Explorer; in seguito analizzeremo la "traduzione" valida per Netscape Navigator.
Il codice completo e commentato è riportato di seguito:
var quanti = 3; // Imposta il numero di menu e di sottomenu
var i;
// Il parametro "conta" serve per indicizzare i vai menu principali
function Apri(conta)
{
if(document.all) // Identifichiamo Microsoft Internet Explorer
{
var elemento = event.toElement;
var mostra = document.all.sottomenu[conta];
// Rende visibile il sottomenu relativo al menu principale al cui evento si scatena la routine
mostra.style.visibility = "visible"; // Visualizza i sottomenu
mostra.style.top = 15; // Stabilisce la distanza dei sottomenu dal bordo superiore
// Ciclando la variabile "i" che fa da contatore
// possiamo identificare il sottomenu relativo al menu di appartenenza
for (i=0; i